<template>
	<el-dialog ref="dialogRef" :title="innerTitle" v-model="dialogVisible" :close-on-click-modal="true" :width="isMobileScreen ? '85%' : '45%'" draggable>
		<div class="dialog__content-wrapper">
			<slot name="content"></slot>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<slot name="footer-button"></slot>
				<el-button v-if="showCancel" size="small" @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" size="small" @click="onConfirm">确 定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import { useLayoutStore } from '@/layouts/hooks'
import { nextTick, ref } from 'vue'
export default defineComponent({
	name: 'Dialog',
	props: {
		title: {
			type: String,
			default: '提示'
		},
		closeOnClickModal: {
			type: Boolean,
			default: false
		},
		showCancel: {
			type: Boolean,
			default: true
		}
	},
	setup(props, { expose }) {
		const innerTitle = computed(() => props.title || '提示')
		const dialogRef = ref()
		const dialogVisible = ref(false)
		const loading = ref(false)
		const store = useLayoutStore()
		const _callback = ref()
		const isMobileScreen = computed(() => {
			return store.state.device === 'mobile'
		})
		function show(callback: () => void) {
			dialogVisible.value = true
			loading.value = false
			nextTick(() => {
				const contentElement = document.querySelector('.dialog__content-wrapper')
				contentElement?.scrollTo({ top: 0 })
			})
			_callback.value = callback
		}
		function close() {
			dialogVisible.value = false
			loading.value = false
		}
		function onConfirm() {
			if (_callback.value) {
				_callback.value(dialogRef.value)
			} else {
				close()
			}
		}
		function showLoading() {
			loading.value = true
		}
		function closeLoading() {
			loading.value = false
		}
		expose({
			show,
			close,
			showLoading,
			closeLoading
		})
		return {
			dialogRef,
			dialogVisible,
			loading,
			isMobileScreen,
			innerTitle,
			onConfirm,
			close,
			show,
			showLoading,
			closeLoading
		}
	}
})
</script>

<style lang="scss">
.dialog__content-wrapper {
	max-height: 50vh;
	padding: 10px 5px;
	margin: -10px;
	overflow: auto;
	.base-form-container {
		padding: 5px 20px;
	}
}

// .scroll-container {
// //   height: 200px; /* 指定容器高度 */
//   overflow-y: auto; /* 显示垂直滚动条 */
// }
	::-webkit-scrollbar {
	width: 8px;
	background-color: #F5F5F5;
	}

	::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background-color: rgba(0, 0, 0, 0.2);
	}
</style>
